<template>
	<div class="clock-container">
    <canvas id="canvas" width="500" height="500"></canvas>
  </div>
</template>

<script setup lang="ts">
	// import dayjs from 'dayjs'
	// // import customParseFormat from 'dayjs/plugin/customParseFormat';  // 限制格式需要这个插件
	// import relativeTime from 'dayjs/plugin/relativeTime'
	// 格式化语言包LocalizedFormat（）
	import { onMounted, ref } from 'vue';
	
// 定义画布和上下文引用
const canvas = ref<HTMLElement>(null);
let ctx = null;
let ctxBack = null;
let numBack = null;

// 时间相关变量
let milliseconds = 0;
let minutes = 0;
let hour = 0;
let date = "";
let timer = null;
// 初始化画布
onMounted(() => {
  canvas.value = document.getElementById('canvas');
  ctx = canvas.value.getContext('2d');
  ctxBack = canvas.value.getContext('2d');
  numBack = canvas.value.getContext('2d');
  
  // 初始化画笔样式
  ctx.strokeStyle = '#7FFFD4';
  ctx.lineWidth = 3;
  ctx.shadowBlur = 5;
  ctx.shadowColor = '#7FFFD4';
  
  ctxBack.lineWidth = 1;
  ctxBack.shadowBlur = 0;
  ctxBack.shadowColor = '#F0F8FF';
  
  // 启动时钟
  startClock();
});
	
// 开始时钟动画
const startClock = () => {
  // 清除可能存在的旧定时器
  if (timer) clearInterval(timer);
  
  // 每50ms更新一次
  timer = setInterval(() => {
    pageInit();
  }, 50);
};

// 页面初始化渲染
const pageInit = () => {
  showTime();
  showBack();
  drawSecPin();
  drawMinPin();
  drawHouPin();
  setPoint();
  setNum();
};

// 绘制数字
const setNum = () => {
  numBack.save();
  numBack.translate(250, 250);
  numBack.beginPath();
  numBack.fillStyle = '#7FFFD4';
  numBack.font = "30px Helvetica";
  
  for (let i = 0; i < 60; i++) {
    if (i % 5 === 0) {
      numBack.lineWidth = 5;
      const xPoint = Math.sin(i * 6 * 2 * Math.PI / 360) * 195;
      const yPoint = -Math.cos(i * 6 * 2 * Math.PI / 360) * 195;
      numBack.fillText(
        i === 0 ? 12 : i / 5,
        i === 0 ? -15 : xPoint - 10,
        i === 0 ? -185 : i <= 30 ? yPoint + 5 : yPoint + 10
      );
    }
  }
  
  numBack.stroke();
  numBack.closePath();
  numBack.restore();
};

// 绘制秒针
const drawSecPin = () => {
  ctxBack.save();
  ctxBack.translate(250, 250);
  ctxBack.rotate(milliseconds / 60 * 2 * Math.PI);
  ctxBack.beginPath();
  ctxBack.strokeStyle = '#AFEEEE';
  ctxBack.lineWidth = 1;
  ctxBack.lineJoin = "bevel";
  ctxBack.miterLimit = 10;
  ctxBack.moveTo(0, 30);
  ctxBack.lineTo(3, -175);
  ctxBack.lineTo(13, -165);
  ctxBack.lineTo(0, -210);
  ctxBack.lineTo(-13, -165);
  ctxBack.lineTo(-3, -175);
  ctxBack.lineTo(0, 30);
  ctxBack.stroke();
  ctxBack.closePath();
  ctxBack.restore();
};

// 绘制分针
const drawMinPin = () => {
  ctxBack.save();
  ctxBack.translate(250, 250);
  ctxBack.rotate(minutes * 6 * Math.PI / 180);
  ctxBack.beginPath();
  ctxBack.strokeStyle = '#20B2AA';
  ctxBack.lineWidth = 1;
  ctxBack.lineJoin = "bevel";
  ctxBack.miterLimit = 10;
  ctxBack.moveTo(0, 20);
  ctxBack.lineTo(3, -145);
  ctxBack.lineTo(10, -135);
  ctxBack.lineTo(0, -180);
  ctxBack.lineTo(-10, -135);
  ctxBack.lineTo(-3, -145);
  ctxBack.lineTo(0, 20);
  ctxBack.stroke();
  ctxBack.closePath();
  ctxBack.restore();
};

// 绘制时针
const drawHouPin = () => {
  ctxBack.save();
  ctxBack.translate(250, 250);
  ctxBack.rotate(hour * 30 * Math.PI / 180);
  ctxBack.beginPath();
  ctxBack.strokeStyle = '#87CEFA';
  ctxBack.lineWidth = 1;
  ctxBack.lineJoin = "bevel";
  ctxBack.miterLimit = 10;
  ctxBack.moveTo(0, 20);
  ctxBack.lineTo(3, -110);
  ctxBack.lineTo(10, -100);
  ctxBack.lineTo(0, -150);
  ctxBack.lineTo(-10, -100);
  ctxBack.lineTo(-3, -110);
  ctxBack.lineTo(0, 20);
  ctxBack.stroke();
  ctxBack.closePath();
  ctxBack.restore();
};

// 设置中心点
const setPoint = () => {
  ctxBack.beginPath();
  ctxBack.fillStyle = 'black';
  ctxBack.arc(250, 250, 3, 0, 2 * Math.PI);
  ctxBack.stroke();
};

// 绘制背景刻度
const showBack = () => {
  for (let i = 0; i < 60; i++) {
    ctxBack.save();
    ctxBack.translate(250, 250);
    ctxBack.rotate(i / 60 * 2 * Math.PI);
    ctxBack.beginPath();
    ctxBack.strokeStyle = '#7FFFD4';
    ctxBack.moveTo(0, -250);
    ctxBack.lineWidth = i % 5 === 0 ? 5 : 2;
    ctxBack.lineTo(0, -230);
    ctxBack.stroke();
    ctxBack.closePath();
    ctxBack.restore();
  }
  ctxBack.beginPath();
  ctxBack.arc(250, 250, 230, 0, 2 * Math.PI);
  ctxBack.stroke();
};

// 角度转弧度
const degToRad = (degree) => {
  const factor = Math.PI / 180;
  return degree === 0 ? 270 * factor : degree * factor;
};

// 更新时间并绘制
const showTime = () => {
  const now = new Date();
  const today = now.toLocaleDateString();
  const time = now.toLocaleTimeString();
  const day = now.getDay();
  const hrs = now.getHours();
  const min = now.getMinutes();
  const sec = now.getSeconds();
  const mil = now.getMilliseconds();
  const smoothsec = sec + (mil / 1000);
  const smoothmin = min + (smoothsec / 60);
  const hours = hrs + (smoothmin / 60);

  milliseconds = smoothsec;
  minutes = smoothmin;
  hour = hours;

  // 设置星期
  switch (day) {
    case 1: date = '星期一'; break;
    case 2: date = '星期二'; break;
    case 3: date = '星期三'; break;
    case 4: date = '星期四'; break;
    case 5: date = '星期五'; break;
    case 6: date = '星期六'; break;
    case 0: date = '星期日'; break;
  }

  // 绘制背景渐变
  const gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
  gradient.addColorStop(0, "#03303a");
  gradient.addColorStop(1, "black");
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 500, 500);

  // 绘制时针圆弧
  ctx.beginPath();
  ctx.strokeStyle = '#87CEFA';
  ctx.arc(250, 250, 215, degToRad(0), degToRad((hours * 30) - 90));
  ctx.stroke();

  // 绘制分针圆弧
  ctx.beginPath();
  ctx.strokeStyle = '#20B2AA';
  ctx.arc(250, 250, 220, degToRad(0), degToRad(smoothmin * 6 - 90));
  ctx.stroke();

  // 绘制秒针圆弧
  ctx.beginPath();
  ctx.strokeStyle = '#AFEEEE';
  ctx.arc(250, 250, 225, degToRad(0), degToRad(smoothsec * 6 - 90));
  ctx.stroke();

  // 绘制日期
  ctx.font = "25px Helvetica Bold";
  ctx.fillStyle = '#7FFFD4';
  ctx.fillText(today + "/星期" + date, 150, 230);

  // 绘制时间
  ctx.font = "23px Helvetica Bold";
  ctx.fillStyle = '#7FFFD4';
  ctx.fillText(time, 190, 280);
};

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style>
</style>
